<template>
  <div class="home" v-color="color">
    <transition name="rotate">
      <div class="animation_ele" v-show="show"></div>
    </transition>
    <button @click="onClick">点击开始动画</button>
    <button @click="onClickPush">跳转about</button>
    <!-- <InputBox v-model="value"/> -->
    <!-- <div>{{value}}</div> -->
  </div>
</template>

<script>
// @ is an alias to /src

export default {
  name: 'Home',
  components: {
    
  },
  computed:{
    color:function(){
      console.log(this.$store.state.currentColor)
      return this.$store.state.currentColor
    }
  },
  data(){
    return{
      show:false,
      value:"1111"
    }
  },
  methods:{
    onClick(){
      // this.show = !this.show;
      // this.$router.push("/about")
      this.$store.commit("CHANGE_COLOR")
    },
    onClickPush(){
      this.$router.push("/about")
    }
  }
}
</script>

<style scoped>
.home
{
  width: 100%;
  height: 100%;
  /* background-color: blue; */
}
.animation_ele
{
  width: 100px;
  height: 100px;
  background-color: red;
  position: absolute;
  left:0px;
  top:0px
}

/* .rotate-enter-active
{
  transition: all 2s ease;
} */

/* .rotate-enter
{
  transform: rotate(0deg);
}

.rotate-enter-to
{
  transform: rotate(90deg);
}

.rotate-leave
{
  transform: rotate(90deg);
}

.rotate-leave-to
{
  transform: rotate(180deg);
}

.rotate-leave-active
{
  transition: all 4s;
} */

</style>
